<template>
  <div class="homeContainer">
    <div class="centerBox">
      <div class="centerLeft">
        <InnterMap
          :airTestsObj="airTestsObj"
          :airports="airports"
          :airports1="airports1"
        />
        <div class="mapInfoBox" v-if="isTest">
          <span>星座: {{ leftInfoBox.star }}</span>
          <span>仰角: {{ leftInfoBox.angle }}度</span>
          <span>算法: {{ leftInfoBox.sf }}</span>
          <span>NANU报: {{ leftInfoBox.nanu }}</span>
          <span>运行标准: {{ leftInfoBox.go }}</span>
          <span>历书周: {{ leftInfoBox.almanacWeek }}</span>
          <span>周内秒: {{ leftInfoBox.secondsOfWeek }}</span>
          <span>数据更新时间(UTC): {{ leftInfoBox.time }}</span>
        </div>
      </div>
      <div class="centerRight">
        <div class="rightTop">
          <div
            @click="changeTabIndex(1)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 1 }"
          >
            机场预测
          </div>
          <div
            @click="changeTabIndex(6)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 6 }"
          >
            航路预测
          </div>
          <div
            @click="changeTabIndex(7)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 7 }"
            style="margin-right: 0px !important"
          >
            航线预测
          </div>
          <div
            @click="changeTabIndex(4)"
            class="rightBtn"
            :class="{ rightBtnCur: changeCurIndex == 4 }"
          >
            区域预测
          </div>
        </div>
        <!-- 机场预测 -->
        <div
          v-show="changeCurIndex == 1"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>代码</label>
              <el-input v-model="airportCode1" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>城市</label>
              <el-input v-model="airportCity1" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>名称</label>
              <el-input v-model="airportName11" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>经度（度）<span style="color: red">*</span></label>
              <el-input v-model="airportLongitude1" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>纬度（度）<span style="color: red">*</span></label>
              <el-input v-model="airportLatitude1" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>海拔高度（英尺）<span style="color: red">*</span></label>
              <el-input v-model="airportElevation1" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>起始时间（UTC）<span style="color: red">*</span></label>
              <el-date-picker
                v-model="selectedTime11"
                type="datetime"
                :show-now="false"
                placeholder="选择日期时间"
                :editable="false"
                :clearable="false"
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item">
              <label>结束时间（UTC）<span style="color: red">*</span></label>
              <el-date-picker
                v-model="selectedTime12"
                type="datetime"
                :show-now="false"
                :editable="false"
                :clearable="false"
                placeholder="选择日期时间"
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault1" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角（度）</label>
              <el-select v-model="optionsListAngleDefault1" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测算法</label>
              <el-select v-model="optionsListAlgorithmDefault1" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>

            <div class="select-item" style="margin-bottom: 8px">
              <label>机场名称</label>
              <el-input v-model="airportName12" />
            </div>
            <div class="kindBtnChanges">
              <div class="btnBox" @click="handleSaveRouteLine1">保存机场</div>
              <div class="btnBox" @click="handleAirportRouterName1">
                清除机场
              </div>
              <div
                @click="findSaveAir"
                class="btnBox"
                style="margin-right: 0px"
              >
                查看已保存机场
              </div>
            </div>
            <div class="select-item">
              <label>已保存的机场</label>
              <el-select
                v-model="routeCode1"
                @change="handleAirChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in airObjList1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
        </div>
        <!-- 航路预测 -->
        <div
          v-show="changeCurIndex == 6"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>代码</label>
              <el-input v-model="airportCode2" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>起始点名称</label>
              <el-input v-model="startName" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>结束点名称</label>
              <el-input v-model="endName" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>起始点经度(度) <span style="color: red">*</span></label>
              <el-input v-model="airportLongitude211" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>结束点经度(度) <span style="color: red">*</span></label>
              <el-input v-model="airportLongitude212" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>起始点纬度(度) <span style="color: red">*</span></label>
              <el-input v-model="airportLatitude221" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>结束点纬度(度) <span style="color: red">*</span></label>
              <el-input v-model="airportLatitude222" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>起始点海拔(英尺) <span style="color: red">*</span></label>
              <el-input v-model="airportElevation21" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>结束点海拔(英尺) <span style="color: red">*</span></label>
              <el-input v-model="airportElevation22" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>起始时间（UTC）<span style="color: red">*</span></label>
              <el-date-picker
                v-model="selectedTime21"
                type="datetime"
                :show-now="false"
                placeholder="选择日期时间"
                :editable="false"
                :clearable="false"
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item">
              <label>结束时间（UTC）<span style="color: red">*</span></label>
              <el-date-picker
                v-model="selectedTime22"
                type="datetime"
                :show-now="false"
                placeholder="选择日期时间"
                :editable="false"
                :clearable="false"
                class="custom-datetime-picker"
              />
            </div>

            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault2" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角(度)</label>
              <el-select v-model="optionsListAngleDefault2" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测算法</label>
              <el-select v-model="optionsListAlgorithmDefault2" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测标准</label>
              <el-select v-model="stdId2" placeholder="">
                <el-option
                  v-for="item in optionsListStandard"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item" style="margin-bottom: 8px">
              <label>航路名称</label>
              <el-input v-model="airportName22" />
            </div>
            <div class="kindBtnChanges">
              <div class="btnBox" @click="handleSaveRouteLine2">保存航路</div>
              <div class="btnBox" @click="handleAirportRouterName2">
                清除航路
              </div>
              <div
                @click="findSaveRoute"
                class="btnBox"
                style="margin-right: 0px"
              >
                查看已保存航路
              </div>
            </div>
            <div class="select-item">
              <label>已保存的航路</label>
              <el-select
                v-model="routeCode2"
                @change="handleRouteChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in routeObjList1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </div>
        </div>
        <!-- 航线预测 -->
        <div
          v-show="changeCurIndex == 7"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <div class="select-item">
                <label>代码</label>
                <el-input v-model="airportCode3" placeholder="请输入" />
              </div>
            </div>
            <div class="select-item select-item7">
              <label>起飞机场名称</label>
              <el-input v-model="airport31" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>到达机场名称</label>
              <el-input v-model="airport32" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>起始点经度(度) <span style="color: red">*</span></label>
              <el-input v-model="airportLongitude311" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>结束点经度(度) <span style="color: red">*</span></label>
              <el-input v-model="airportLongitude312" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>起始点纬度(度) <span style="color: red">*</span></label>
              <el-input v-model="airportLatitude321" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>结束点纬度(度) <span style="color: red">*</span></label>
              <el-input v-model="airportLatitude322" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>起始点海拔(英尺) <span style="color: red">*</span></label>
              <el-input v-model="airportElevation31" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>结束点海拔(英尺) <span style="color: red">*</span></label>
              <el-input v-model="airportElevation32" placeholder="请输入" />
            </div>
            <div class="select-item select-item7">
              <label>起飞仰角(度)</label>
              <el-select v-model="optionsListAngleDefault31" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item select-item7">
              <label>到达仰角(度)</label>
              <el-select v-model="optionsListAngleDefault32" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>起始时间（UTC）</label>
              <el-date-picker
                v-model="selectedTime31"
                type="datetime"
                :show-now="false"
                placeholder="选择日期时间"
                :editable="false"
                :clearable="false"
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item">
              <label>结束时间（UTC）</label>
              <el-date-picker
                v-model="selectedTime32"
                type="datetime"
                :show-now="false"
                placeholder="选择日期时间"
                :editable="false"
                :clearable="false"
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item select-item7">
              <label>机场预测</label>
              <label>预测算法</label>
              <el-select
                style="margin-bottom: 16px"
                v-model="optionsListAlgorithmDefault3"
                placeholder=""
              >
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
              <label>预测仰角(度)</label>
              <el-select v-model="optionsListAngleDefault33" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item select-item7">
              <label>航路预测</label>
              <label>终端区预测标准</label>
              <el-select
                style="margin-bottom: 16px"
                v-model="stdId31"
                placeholder=""
              >
                <el-option
                  v-for="item in optionsListStandard"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
              <label>预测算法</label>
              <el-select
                style="margin-bottom: 16px"
                v-model="optionsListAlgorithmDefault31"
                placeholder=""
              >
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
              <label>预测仰角(度)</label>
              <el-select v-model="optionsListAngleDefault34" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item" style="clear: both; margin-bottom: 8px">
              <div class="routerName">
                <div class="innerBox">
                  <el-checkbox
                    v-for="(item, index) in waypoints7"
                    :key="index"
                    v-model="item.checked"
                    class="white-text-checkbox"
                    @change="handleCheckboxChange(index)"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </div>
              </div>
            </div>
            <div class="kindBtnChanges">
              <div class="btnBox" @click="addItem">插入航路点</div>
              <div class="btnBox" @click="deleteItem" style="margin-right: 0px">
                删除航路点
              </div>
            </div>

            <div class="select-item">
              <label>航路点经度(度)</label>
              <el-input v-model="lineInputlongitude" />
            </div>
            <div class="select-item">
              <label>航路点纬度(度)</label>
              <el-input v-model="lineInputlatitude" />
            </div>
            <div class="select-item">
              <label>航路点海拔(英尺)</label>
              <el-input v-model="lineInputelevation" />
            </div>
            <div class="select-item">
              <label>航路点名称</label>
              <el-input v-model="lineInputName" />
            </div>
            <div class="select-item">
              <label>预测方式</label>
              <el-select v-model="forecastMode" placeholder="请选择">
                <el-option label="RAIM" value="0"></el-option>
                <el-option label="ADS-B" value="1"></el-option>
              </el-select>
            </div>
            <div class="select-item">
              <label>终端区预测标准</label>
              <el-select v-model="stdId3" placeholder="">
                <el-option
                  v-for="item in optionsListStandard"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault3" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测算法</label>
              <el-select v-model="optionsListAlgorithmDefault32" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>

            <div class="select-item" style="margin-bottom: 8px">
              <label>航线名称</label>
              <el-input v-model="airportName32" />
            </div>
            <div class="kindBtnChanges">
              <div class="btnBox" @click="handleSaveRouteLine3">保存航线</div>
              <div class="btnBox" @click="handleAirportRouterName3">
                清除航线
              </div>
              <div
                @click="findLineRoute"
                class="btnBox"
                style="margin-right: 0px"
              >
                查看已保存航线
              </div>
            </div>
            <div class="select-item">
              <label>已保存的航线</label>
              <el-select
                v-model="routeCode3"
                @change="handleLineChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in lineObjList1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </div>
          </div>
        </div>
        <!-- 区域预测 -->
        <div
          v-show="changeCurIndex == 4"
          class="rightInfo custom-select-container"
        >
          <div class="airport-select-container">
            <div class="select-item">
              <label>代码</label>
              <el-input v-model="areaCode" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>城市</label>
              <el-input v-model="areaCity" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>名称</label>
              <el-input v-model="areaName" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>区域点经度（度）<span style="color: red">*</span></label>
              <el-input v-model="areaLongitude" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>区域点纬度（度）<span style="color: red">*</span></label>
              <el-input v-model="areaLatitude" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>区域点海拔（英尺）<span style="color: red">*</span></label>
              <el-input v-model="areaElevation" placeholder="请输入" />
            </div>
            <div class="select-item">
              <label>起始时间（UTC）</label>
              <el-date-picker
                v-model="AreaStartTime"
                type="datetime"
                :show-now="false"
                placeholder="选择日期时间"
                :editable="false"
                :clearable="false"
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item">
              <label>结束时间（UTC）</label>
              <el-date-picker
                v-model="AreaEndTime"
                type="datetime"
                :show-now="false"
                placeholder="选择日期时间"
                :editable="false"
                :clearable="false"
                class="custom-datetime-picker"
              />
            </div>
            <div class="select-item">
              <label>预测方式</label>
              <el-select v-model="forecastAreaMode" placeholder="请选择">
                <el-option label="RAIM" value="0"></el-option>
                <el-option label="ADS-B" value="1"></el-option>
              </el-select>
            </div>
            <div class="select-item">
              <label>预测星座</label>
              <el-select v-model="optionsListSatsysDefault4" placeholder="">
                <el-option
                  v-for="item in optionsListSatsys"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测仰角（度）</label>
              <el-select v-model="optionsListAngleDefault4" placeholder="">
                <el-option
                  v-for="item in optionsListAngle"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div class="select-item">
              <label>预测算法</label>
              <el-select v-model="optionsListAlgorithmDefault4" placeholder="">
                <el-option
                  v-for="item in optionsListAlgorithm"
                  :key="item.id"
                  :label="item.desc"
                  :value="item.id"
                />
              </el-select>
            </div>

            <div class="select-item" style="margin-bottom: 8px">
              <label>区域名称</label>
              <el-input v-model="areaName1" />
            </div>
            <div class="kindBtnChanges">
              <div class="btnBox" @click="handleSaveRouteLine4">保存区域</div>
              <div class="btnBox" @click="handleAirportRouterName4">
                清除区域
              </div>
              <div
                @click="findSaveArea"
                class="btnBox"
                style="margin-right: 0px"
              >
                查看已保存区域
              </div>
            </div>
            <div class="select-item">
              <label>已保存的区域</label>
              <el-select
                v-model="routeCode4"
                @change="handleAreaChange"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in areaObjList1"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </div>
          </div>
        </div>
        <div
          v-if="changeCurIndex == 1"
          @click="airportsResult1"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 6"
          @click="airportsResult6"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 7"
          @click="airportsResult7"
          class="rightBottom"
        >
          开始预测
        </div>
        <div
          v-if="changeCurIndex == 4"
          @click="airportsResult4"
          class="rightBottom"
        >
          开始预测
        </div>
      </div>
    </div>
    <div class="findRouteBox" v-if="saveAirBool">
      <div class="detailWrapBoxCe">
        <div
          style="border-radius: 12px; height: 100%; border: 2px solid #003b7a"
        >
          <div @click="clearAirIndex" class="topBack"><i></i></div>
          <div class="detailBody">
            <div class="tableScrollBox">
              <el-table
                :data="currentAirListData"
                class="custom-table"
                style="width: 100%"
              >
                <el-table-column prop="name" label="机场名称" width="320" />
                <el-table-column prop="longitude" label="经度" />
                <el-table-column prop="latitude" label="纬度" />
                <el-table-column prop="elevation" label="海拔" />
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleAirEdit(scope.row)"
                      >预测</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleAirEdit(scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleAirDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
              class="custom-pagination"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize1"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="findRouteBox" v-if="saveRouteBool">
      <div class="detailWrapBoxCe">
        <div
          style="border-radius: 12px; height: 100%; border: 2px solid #003b7a"
        >
          <div @click="clearAirIndex1" class="topBack"><i></i></div>
          <div class="detailBody">
            <div class="tableScrollBox">
              <el-table
                :data="currentRouteListData"
                class="custom-table"
                style="width: 100%"
              >
                <el-table-column prop="name" label="航路名称" width="320" />
                <el-table-column prop="latitude" label="起始点经纬度"
                  ><template #default="scope">
                    <span
                      >{{ scope.row.waypoints[0].longitude }}-{{
                        scope.row.waypoints[0].latitude
                      }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column prop="longitude" label="起始点经纬度">
                  <template #default="scope">
                    <span
                      >{{ scope.row.waypoints[1].longitude }}-{{
                        scope.row.waypoints[1].latitude
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="elevation" label="起始点海拔"
                  ><template #default="scope">
                    <span
                      >{{ scope.row.waypoints[0].elevation }}-{{
                        scope.row.waypoints[1].elevation
                      }}</span
                    >
                  </template></el-table-column
                >
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleRouteEdit(scope.row)"
                      >预测</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleRouteEdit(scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleRouteDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
              class="custom-pagination"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize2"
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="findRouteBox" v-if="saveLineBool">
      <div class="detailWrapBoxCe">
        <div
          style="border-radius: 12px; height: 100%; border: 2px solid #003b7a"
        >
          <div @click="clearAirIndex2" class="topBack"><i></i></div>
          <div class="detailBody">
            <div class="tableScrollBox">
              <el-table
                :data="currentLineListData"
                class="custom-table"
                style="width: 100%"
              >
                <el-table-column prop="name" label="航线名称" width="320" />
                <el-table-column prop="latitude" label="起始点经纬度"
                  ><template #default="scope">
                    <span
                      >{{ scope.row.depAirportLongitude }}-{{
                        scope.row.depAirportLatitude
                      }}
                    </span>
                  </template></el-table-column
                >
                <el-table-column prop="longitude" label="结束点经纬度">
                  <template #default="scope">
                    <span
                      >{{ scope.row.destAirportLongitude }}-{{
                        scope.row.destAirportLatitude
                      }}</span
                    >
                  </template>
                </el-table-column>
                <el-table-column prop="elevation" label="起始点海拔"
                  ><template #default="scope">
                    <span>{{ scope.row.depAirportElevation }}</span>
                  </template></el-table-column
                >
                <el-table-column prop="elevation" label="结束点海拔"
                  ><template #default="scope">
                    <span>{{ scope.row.destAirportElevation }}</span>
                  </template></el-table-column
                >
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleLineEdit(scope.row)"
                      >预测</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleLineEdit(scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleLineDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
              class="custom-pagination"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total3"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize3"
              @size-change="handleSizeChange3"
              @current-change="handleCurrentChange3"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="findRouteBox" v-if="saveAreaBool">
      <div class="detailWrapBoxCe">
        <div
          style="border-radius: 12px; height: 100%; border: 2px solid #003b7a"
        >
          <div @click="clearAirIndex3" class="topBack"><i></i></div>
          <div class="detailBody">
            <div class="tableScrollBox">
              <el-table
                :data="currentAreaListData"
                class="custom-table"
                style="width: 100%"
              >
                <el-table-column prop="name" label="区域名称" width="320" />
                <el-table-column prop="longitude" label="经度" />
                <el-table-column prop="latitude" label="纬度" />
                <el-table-column prop="elevation" label="海拔" />
                <el-table-column label="操作" width="200">
                  <template #default="scope">
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleAreaEdit(scope.row)"
                      >预测</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleAreaEdit(scope.row)"
                      >修改</el-button
                    >
                    <el-button
                      link
                      type="primary"
                      size="small"
                      @click="handleAreaDelete(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-pagination
              class="custom-pagination"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize4"
              @size-change="handleSizeChange4"
              @current-change="handleCurrentChange4"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="footerTime">
      <p>当前时间(UTC)：{{ utcTime }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent, onMounted, computed } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";
import { useTime } from "@/utils/tools/useTime";
import {
  forecastTypesApi,
  selectionsGetApi,
  meAirportsApi,
  deleteMeAirpsortsSplitApi,
  userMeAirpsortsIdApi,
  putMeAirpsortsSplitApi,
  postMeAirpsortsSplitApi,
  meRoutesApi,
  postMeRoutesApi,
  deleteMeRoutesApi,
  meRoutesIdApi,
  putMeRoutesApi,
  meAirlinesApi,
  postMeAirlinesApi,
  deleteMeAirlinesApi,
  meAirlinesIdApi,
  putMeAirlinesApi,
  meAreasApi,
  postMeAreasApi,
  deleteMeAreasApi,
  meAirAreasIdApi,
  putMeAreasApi,
  postForecastAirportCustomApi,
  postForecastRouteCustomApi,
  postForecastAirlineCustomApi,
  postForecastAreaCustomApi,
} from "@/api/tabOne";
import { airportsApi } from "@/api/home";

const { utcTime } = useTime();

const InnterMap = defineAsyncComponent({
  loader: () => import("@/views/custom/components/innterMap.vue"),
  errorComponent: { template: "<div>地图加载失败，请刷新重试</div>" },
  timeout: 5000,
});
// 左下角信息展示
const isTest = ref(false);
let leftInfoBox = ref({});

let saveAirBool = ref(false);
let saveAirList = ref([]);
let saveRouteBool = ref(false);
let saveRouteList = ref([]);
let saveLineBool = ref(false);
let saveLineList = ref([]);
let saveAreaBool = ref(false);
let saveAreaList = ref([]);
let saveRouteId1 = ref("");
let saveRouteId2 = ref("");
let saveRouteId3 = ref("");
let saveRouteId4 = ref("");
let changeCurIndex = ref("1");
let isAirEditRef = ref(false);
let isRouteEditRef = ref(false);
let isLineEditRef = ref(false);
let isAreaEditRef = ref(false);

let airportList = ref([]); // 所有机场列表（ref数组）
let optionsListAngle = ref([]); // 角度列表
let optionsListAlgorithm = ref([]); // 算法列表
let optionsListSatsys = ref([]); // 星座列表
let optionsListStandard = ref([]); // 标准列表

// 机场预测相关数据
let airObjList1 = ref([]);
let airObjListObj1 = ref([]);
let airportCode1 = ref("");
let airportCity1 = ref("");
let airportName11 = ref("");
let airportLongitude1 = ref("");
let airportLatitude1 = ref("");
let airportElevation1 = ref("");
let selectedTime11 = ref(null);
let selectedTime12 = ref(null);
let optionsListSatsysDefault1 = ref("");
let optionsListAngleDefault1 = ref("");
let optionsListAlgorithmDefault1 = ref("");
let airportName12 = ref("");
let routeCode1 = ref("");

// 航路预测相关数据
let routeObjList1 = ref([]);
let routeObjListObj1 = ref([]);
let airportCode2 = ref("");
let startName = ref("");
let endName = ref("");
let airportLongitude211 = ref("");
let airportLongitude212 = ref("");
let airportLatitude221 = ref("");
let airportLatitude222 = ref("");
let airportElevation21 = ref("");
let airportElevation22 = ref("");
let selectedTime21 = ref(null);
let selectedTime22 = ref(null);
let optionsListSatsysDefault2 = ref("");
let optionsListAngleDefault2 = ref("");
let optionsListAlgorithmDefault2 = ref("");
let stdId2 = ref("");
let airportName22 = ref("");
let routeCode2 = ref("");

// 航线预测相关数据
let lineObjList1 = ref([]);
let lineObjListObj1 = ref([]);
let airportCode3 = ref("");
let airport31 = ref("");
let airport32 = ref("");
let airportLongitude311 = ref("");
let airportLongitude312 = ref("");
let airportLatitude321 = ref("");
let airportLatitude322 = ref("");
let airportElevation31 = ref("");
let airportElevation32 = ref("");
let optionsListAngleDefault31 = ref("");
let optionsListAngleDefault32 = ref("");
let optionsListAngleDefault33 = ref("");
let optionsListAngleDefault34 = ref("");
let selectedTime31 = ref(null);
let selectedTime32 = ref(null);
let waypoints7 = ref([]);
let stdId3 = ref("");
let stdId31 = ref("");
let optionsListSatsysDefault3 = ref("");
let airportName32 = ref("");
let optionsListAlgorithmDefault3 = ref("");
let optionsListAlgorithmDefault31 = ref("");
let optionsListAlgorithmDefault32 = ref("");
let lineInputlongitude = ref("");
let lineInputlatitude = ref("");
let lineInputelevation = ref("");
let lineInputName = ref("");
let forecastMode = ref("");
let routeCode3 = ref("");

// 区域预测相关数据
let areaObjList1 = ref([]);
let areaObjListObj1 = ref([]);
let areaCode = ref("");
let areaCity = ref("");
let areaName = ref("");
let areaLongitude = ref("");
let areaLatitude = ref("");
let areaElevation = ref("");
let AreaStartTime = ref(null);
let AreaEndTime = ref(null);
let forecastAreaMode = ref("");
let optionsListSatsysDefault4 = ref("");
let optionsListAngleDefault4 = ref("");
let optionsListAlgorithmDefault4 = ref("");
let areaName1 = ref("");
let routeCode4 = ref("");

// 切换详情tab索引
const changeTabIndex = (index) => {
  routeCode1.value = "";
  routeCode2.value = "";
  routeCode3.value = "";
  routeCode4.value = "";
  changeCurIndex.value = index;
  loadDefaultValues(3, index);
};

const loadAllOptions = async () => {
  try {
    // 第一步：加载角度、星座、算法等下拉列表
    const { code: typeCode, data: typeData } = await forecastTypesApi();
    if (typeCode === 200) {
      optionsListAngle.value = typeData.angle || []; // 赋值ref.value，保留响应式
      optionsListAlgorithm.value = typeData.algorithm || [];
      optionsListSatsys.value = typeData.satsys || [];
      optionsListStandard.value = typeData.standard || [];
    }
    // 第二步：加载机场列表（依赖forecastTypes完成后执行）
    const { code: airportCode, data: airportData } = await airportsApi();
    if (airportCode === 200) {
      airportList.value = airportData.list || []; // 赋值ref.value
    }
    // 第三步：加载默认值（必须在下拉列表和机场列表都加载完成后）
    await loadDefaultValues(3, 1);
  } catch (error) {
    console.error("初始化数据失败：", error);
  }
};

const loadDefaultValues = async (methods = 3, type = 1) => {
  try {
    const { code: defaultCode, data: defaultData } = await selectionsGetApi(
      methods,
      type
    );
    if (defaultCode !== 200 || !defaultData) return;
    if (type == 1) {
      const { code: defaultSplitCode, data: defaultSplitData } =
        await meAirportsApi();
      if (defaultSplitCode === 200) {
        airObjListObj1.value = defaultSplitData;
        const routeData = defaultSplitData.map((outerItem) => ({
          code: outerItem.airportCode,
          name: outerItem.name,
          id: outerItem.id,
        }));
        routeData.unshift({
          id: "0000000000",
          name: "请选择",
          code: "0000000000",
        });
        airObjList1.value = routeData;
      }
    }
    if (type == 6) {
      const { code: defaultSplitCode, data: defaultSplitData } =
        await meRoutesApi();
      if (defaultSplitCode === 200) {
        routeObjListObj1.value = defaultSplitData;
        const routeData = defaultSplitData.map((outerItem) => ({
          code: outerItem.code,
          name: outerItem.name,
          id: outerItem.id,
        }));
        routeData.unshift({
          id: "0000000000",
          name: "请选择",
          code: "0000000000",
        });
        routeObjList1.value = routeData;
      }
    }
    if (type == 7) {
      const { code: defaultSplitCode, data: defaultSplitData } =
        await meAirlinesApi();
      if (defaultSplitCode === 200) {
        lineObjListObj1.value = defaultSplitData;
        const routeData = defaultSplitData.map((outerItem) => ({
          code: outerItem.name,
          name: outerItem.name,
          id: outerItem.id,
        }));
        routeData.unshift({
          id: "0000000000",
          name: "请选择",
          code: "请选择",
        });
        lineObjList1.value = routeData;
      }
    }
    if (type == 4) {
      const { code: defaultSplitCode, data: defaultSplitData } =
        await meAreasApi();
      if (defaultSplitCode === 200) {
        areaObjListObj1.value = defaultSplitData;
        const routeData = defaultSplitData.map((outerItem) => ({
          code: outerItem.name,
          name: outerItem.name,
          id: outerItem.id,
        }));
        routeData.unshift({
          id: "0000000000",
          name: "请选择",
          code: "请选择",
        });
        areaObjList1.value = routeData;
      }
    }
    // 机场预测
    if (type == 1) {
      backStrFn1(defaultData, false);
    }
    // 航路预测
    if (type == 6) {
      backStrFn2(defaultData, false);
    }
    // 航路预测
    if (type == 7) {
      backStrFn3(defaultData, false);
    }
    // 区域预测
    if (type == 4) {
      backStrFn4(defaultData, false);
    }
  } catch (error) {
    console.error("加载默认值失败：", error);
  }
};

const backStrFn1 = (itemObj, isEdit) => {
  isAirEditRef.value = isEdit;
  saveRouteId1.value = itemObj.id;
  airportCode1.value = itemObj.airportRequest.airportCode;
  airportCity1.value = itemObj.airportRequest.city;
  airportName11.value = itemObj.airportRequest.name;
  airportName12.value = itemObj.airportRequest.name;
  airportLongitude1.value =
    itemObj.airportRequest.longitude == null
      ? ""
      : itemObj.airportRequest.longitude;
  airportLatitude1.value =
    itemObj.airportRequest.latitude == null
      ? ""
      : itemObj.airportRequest.latitude;
  airportElevation1.value =
    itemObj.airportRequest.elevation == null
      ? ""
      : itemObj.airportRequest.elevation;
  selectedTime11.value = new Date(itemObj.period.startTime);
  selectedTime12.value = new Date(itemObj.period.endTime);
  const angleId = String(itemObj.params.angleId || "");
  const algorithmId = String(itemObj.params.algorithmId || "");
  const satSysId = String(itemObj.params.satSysId || "");
  // 校验默认值是否在下拉列表中存在，避免无效回显
  const isAngleValid = optionsListAngle.value.some(
    (item) => item.id === angleId
  );
  const isAlgorithmValid = optionsListAlgorithm.value.some(
    (item) => item.id === algorithmId
  );
  const isSatelliteValid = optionsListSatsys.value.some(
    (item) => item.id === satSysId
  );
  // 设置默认值（仅在有效时设置）
  optionsListAngleDefault1.value = isAngleValid ? angleId : "";
  optionsListAlgorithmDefault1.value = isAlgorithmValid ? algorithmId : "";
  optionsListSatsysDefault1.value = isSatelliteValid ? satSysId : "";
};
const backStrFn11 = (itemObj, isEdit) => {
  isAirEditRef.value = isEdit;
  saveRouteId1.value = itemObj.id;
  airportCode1.value = itemObj.airportCode;
  airportCity1.value = itemObj.city;
  airportName11.value = itemObj.name;
  airportName12.value = itemObj.name;
  airportLongitude1.value = itemObj.longitude == null ? "" : itemObj.longitude;
  airportLatitude1.value = itemObj.latitude == null ? "" : itemObj.latitude;
  airportElevation1.value = itemObj.elevation == null ? "" : itemObj.elevation;
};
const backStrFn2 = (itemObj, isEdit) => {
  isRouteEditRef.value = isEdit;
  saveRouteId2.value = itemObj.id;
  airportCode2.value = itemObj.routeCode;
  airportName22.value = itemObj.routeName;
  airportLongitude211.value =
    itemObj.waypoints[0].longitude == null
      ? ""
      : itemObj.waypoints[0].longitude;
  airportLongitude212.value =
    itemObj.waypoints[1].longitude == null
      ? ""
      : itemObj.waypoints[1].longitude;
  airportLatitude221.value =
    itemObj.waypoints[0].latitude == null ? "" : itemObj.waypoints[0].latitude;
  airportLatitude222.value =
    itemObj.waypoints[1].latitude == null ? "" : itemObj.waypoints[1].latitude;
  airportElevation21.value =
    itemObj.waypoints[0].elevation == null
      ? ""
      : itemObj.waypoints[0].elevation;
  airportElevation22.value =
    itemObj.waypoints[1].elevation == null
      ? ""
      : itemObj.waypoints[1].elevation;
  startName.value = itemObj.waypoints[0].name;
  endName.value = itemObj.waypoints[1].name;
  selectedTime21.value = new Date(itemObj.period.startTime);
  selectedTime22.value = new Date(itemObj.period.endTime);

  const angleId = String(itemObj.params.angleId || "");
  const algorithmId = String(itemObj.params.algorithmId || "");
  const satSysId = String(itemObj.params.satSysId || "");
  const stdId = String(itemObj.params.stdId || "");
  // 校验默认值是否在下拉列表中存在，避免无效回显
  const isAngleValid = optionsListAngle.value.some(
    (item) => item.id === angleId
  );
  const isAlgorithmValid = optionsListAlgorithm.value.some(
    (item) => item.id === algorithmId
  );
  const isSatelliteValid = optionsListSatsys.value.some(
    (item) => item.id === satSysId
  );
  const isStdId = optionsListStandard.value.some((item) => item.id === stdId);
  // 设置默认值（仅在有效时设置）
  optionsListAngleDefault2.value = isAngleValid ? angleId : "";
  optionsListAlgorithmDefault2.value = isAlgorithmValid ? algorithmId : "";
  optionsListSatsysDefault2.value = isSatelliteValid ? satSysId : "";
  stdId2.value = isStdId ? stdId : "";
};
const backStrFn22 = (itemObj, isEdit) => {
  isRouteEditRef.value = isEdit;
  saveRouteId2.value = itemObj.id;
  airportCode2.value = itemObj.code;
  airportName22.value = itemObj.name;
  airportLongitude211.value =
    itemObj.waypoints[0].longitude == null
      ? ""
      : itemObj.waypoints[0].longitude;
  airportLongitude212.value =
    itemObj.waypoints[1].longitude == null
      ? ""
      : itemObj.waypoints[1].longitude;
  airportLatitude221.value =
    itemObj.waypoints[0].latitude == null ? "" : itemObj.waypoints[0].latitude;
  airportLatitude222.value =
    itemObj.waypoints[1].latitude == null ? "" : itemObj.waypoints[1].latitude;
  airportElevation21.value =
    itemObj.waypoints[0].elevation == null
      ? ""
      : itemObj.waypoints[0].elevation;
  airportElevation22.value =
    itemObj.waypoints[1].elevation == null
      ? ""
      : itemObj.waypoints[1].elevation;
  startName.value = itemObj.waypoints[0].name;
  endName.value = itemObj.waypoints[1].name;
};
const backStrFn3 = (itemObj, isEdit) => {
  isLineEditRef.value = isEdit;
  saveRouteId3.value = itemObj.id;
  airportCode3.value = itemObj.airlineCode;
  airport31.value = itemObj.depAirport.airportCode;
  airport32.value = itemObj.destAirport.airportCode;
  airportLongitude311.value =
    itemObj.destAirport.longitude == null ? "" : itemObj.destAirport.longitude;
  airportLongitude312.value =
    itemObj.depAirport.longitude == null ? "" : itemObj.depAirport.longitude;
  airportLatitude321.value =
    itemObj.destAirport.latitude == null ? "" : itemObj.destAirport.latitude;
  airportLatitude322.value =
    itemObj.depAirport.latitude == null ? "" : itemObj.depAirport.latitude;
  airportElevation31.value =
    itemObj.destAirport.elevation == null ? "" : itemObj.destAirport.elevation;
  airportElevation32.value =
    itemObj.depAirport.elevation == null ? "" : itemObj.depAirport.elevation;
  optionsListAngleDefault31.value = String(itemObj.depAngleId);
  optionsListAngleDefault32.value = String(itemObj.destAngleId);
  optionsListAngleDefault33.value = String(itemObj.airportAngleId);
  optionsListAngleDefault34.value = String(itemObj.routeAngleId);
  selectedTime31.value = new Date(itemObj.period.startTime);
  selectedTime32.value = new Date(itemObj.period.endTime);
  const lineSegmentsNewArr = itemObj.waypoints.map((item) => {
    return {
      elevation: item.elevation,
      latitude: item.latitude,
      longitude: item.longitude,
      name: item.name,
      checked: false,
    };
  });
  waypoints7.value = lineSegmentsNewArr;
  stdId3.value = String(itemObj.stdId);
  stdId31.value = String(itemObj.routeStdId);
  optionsListSatsysDefault3.value = String(itemObj.satSysId);
  airportName32.value = itemObj.airlineName;
  optionsListAlgorithmDefault3.value = String(itemObj.airportAlgorithmId);
  optionsListAlgorithmDefault31.value = String(itemObj.routeAlgorithmId);
  optionsListAlgorithmDefault32.value = String(itemObj.algorithmId);
  forecastMode.value = String(itemObj.forecastMode);
};
const backStrFn33 = (itemObj, isEdit) => {
  console.log(itemObj, "fn33 in");
  isLineEditRef.value = isEdit;
  saveRouteId3.value = itemObj.id;
  airportCode3.value = itemObj.code;
  airport31.value = itemObj.depAirportName;
  airport32.value = itemObj.destAirportName;
  airportName32.value = itemObj.name;
  airportLongitude311.value =
    itemObj.destAirportLongitude == null ? "" : itemObj.destAirportLongitude;
  airportLongitude312.value =
    itemObj.depAirportLongitude == null ? "" : itemObj.depAirportLongitude;
  airportLatitude321.value =
    itemObj.destAirportLatitude == null ? "" : itemObj.destAirportLatitude;
  airportLatitude322.value =
    itemObj.depAirportLatitude == null ? "" : itemObj.depAirportLatitude;
  airportElevation31.value =
    itemObj.destAirportElevation == null ? "" : itemObj.destAirportElevation;
  airportElevation32.value =
    itemObj.depAirportElevation == null ? "" : itemObj.depAirportElevation;
  optionsListAngleDefault31.value = String(itemObj.depAngleId);
  optionsListAngleDefault32.value = String(itemObj.destAngleId);
  const lineSegmentsNewArr = itemObj.waypoints.map((item) => {
    return {
      elevation: item.elevation,
      latitude: item.latitude,
      longitude: item.longitude,
      name: item.name,
      checked: false,
    };
  });
  waypoints7.value = lineSegmentsNewArr;
};
const backStrFn4 = (itemObj, isEdit) => {
  isAreaEditRef.value = isEdit;
  saveRouteId4.value = itemObj.id;
  areaCode.value = itemObj.code;
  areaCity.value = itemObj.city;
  areaName.value = itemObj.name;
  forecastAreaMode.value = String(itemObj.forecastMode);
  areaLongitude.value = itemObj.longitude == null ? "" : itemObj.longitude;
  areaLatitude.value = itemObj.latitude == null ? "" : itemObj.latitude;
  areaElevation.value = itemObj.elevation == null ? "" : itemObj.elevation;
  AreaStartTime.value = new Date(itemObj.period.startTime);
  AreaEndTime.value = new Date(itemObj.period.endTime);
  optionsListSatsysDefault4.value = String(itemObj.params.satSysId);
  optionsListAngleDefault4.value = String(itemObj.params.angleId);
  optionsListAlgorithmDefault4.value = String(itemObj.params.algorithmId);
  areaName1.value = itemObj.name;
};
const backStrFn44 = (itemObj, isEdit) => {
  isAreaEditRef.value = isEdit;
  saveRouteId4.value = itemObj.id;
  areaCode.value = itemObj.pointCode;
  areaCity.value = itemObj.city;
  areaName.value = itemObj.name;
  areaLongitude.value = itemObj.longitude == null ? "" : itemObj.longitude;
  areaLatitude.value = itemObj.latitude == null ? "" : itemObj.latitude;
  areaElevation.value = itemObj.elevation == null ? "" : itemObj.elevation;
  areaName1.value = itemObj.name;
};

const handleSaveRouteLine1 = async () => {
  const paramsObj = {
    airportCode: airportCode1.value,
    city: airportCity1.value,
    elevation: airportElevation1.value,
    id: saveRouteId1.value,
    latitude: airportLatitude1.value,
    longitude: airportLongitude1.value,
    name: airportName12.value,
  };

  if (isAirEditRef.value) {
    const { code } = await putMeAirpsortsSplitApi(paramsObj);
    if (code === 200) {
      isAirEditRef.value = false;
      findSaveAir();
    }
  } else {
    const { code } = await postMeAirpsortsSplitApi(paramsObj);
    if (code === 200) {
      findSaveAir1();
    }
  }
};

const handleSaveRouteLine2 = async () => {
  const paramsObj = {
    code: airportCode2.value,
    id: saveRouteId2.value,
    name: airportName22.value,
    waypoints: [
      {
        elevation: airportElevation21.value,
        latitude: airportLatitude221.value,
        longitude: airportLongitude211.value,
        name: startName.value,
      },
      {
        elevation: airportElevation22.value,
        latitude: airportLatitude222.value,
        longitude: airportLongitude212.value,
        name: endName.value,
      },
    ],
  };

  if (isRouteEditRef.value) {
    const { code } = await putMeRoutesApi(paramsObj);
    if (code === 200) {
      isRouteEditRef.value = false;
      findSaveRoute();
    }
  } else {
    const { code } = await postMeRoutesApi(paramsObj);
    if (code === 200) {
      findSaveRoute1();
    }
  }
};

const handleSaveRouteLine3 = async () => {
  const waypoints7NewArr = waypoints7.value.map((item) => {
    return {
      elevation: item.elevation,
      latitude: item.latitude,
      longitude: item.longitude,
      name: item.name,
    };
  });
  const paramsObj = {
    code: airportCode3.value,
    depAirportElevation: airportElevation31.value,
    depAirportLatitude: airportLatitude321.value,
    depAirportLongitude: airportLongitude311.value,
    depAirportName: airport31.value,
    depAngleId: optionsListAngleDefault31.value,
    destAirportElevation: airportElevation32.value,
    destAirportLatitude: airportLatitude322.value,
    destAirportLongitude: airportLongitude312.value,
    destAirportName: airport32.value,
    destAngleId: optionsListAngleDefault32.value,
    id: saveRouteId3.value,
    name: airportName32.value,
    waypoints: waypoints7NewArr,
  };

  if (isLineEditRef.value) {
    const { code } = await putMeAirlinesApi(paramsObj);
    if (code === 200) {
      isLineEditRef.value = false;
      findLineRoute();
    }
  } else {
    const { code } = await postMeAirlinesApi(paramsObj);
    if (code === 200) {
      findLineRoute1();
    }
  }
};

const handleSaveRouteLine4 = async () => {
  const paramsObj = {
    pointCode: areaCode.value,
    city: areaCity.value,
    elevation: areaElevation.value,
    id: saveRouteId4.value,
    latitude: areaLatitude.value,
    longitude: areaLongitude.value,
    name: areaName1.value,
  };

  if (isAreaEditRef.value) {
    const { code } = await putMeAreasApi(paramsObj);
    if (code === 200) {
      isAreaEditRef.value = false;
      findSaveArea();
    }
  } else {
    const { code } = await postMeAreasApi(paramsObj);
    if (code === 200) {
      findSaveArea1();
    }
  }
};

const handleAirportRouterName1 = () => {
  airportName12.value = "";
};
const handleAirportRouterName2 = () => {
  airportName22.value = "";
};
const handleAirportRouterName3 = () => {
  airportName32.value = "";
};
const handleAirportRouterName4 = () => {
  areaName1.value = "";
};

const clearAirIndex = () => {
  isAirEditRef.value = false;
  saveAirBool.value = false;
};
const clearAirIndex1 = () => {
  isRouteEditRef.value = false;
  saveRouteBool.value = false;
};
const clearAirIndex2 = () => {
  isLineEditRef.value = false;
  saveLineBool.value = false;
};
const clearAirIndex3 = () => {
  isAreaEditRef.value = false;
  saveAreaBool.value = false;
};

const handleAirEdit = async (row) => {
  const { code, data } = await userMeAirpsortsIdApi(row.id);
  if (code === 200) {
    backStrFn11(data, true);
    saveAirBool.value = false;
    // airObjList1.value = data;
  }
};
const handleAirDelete = async (row) => {
  const { code } = await deleteMeAirpsortsSplitApi(row.id);
  if (code === 200) {
    findSaveAir();
  }
};

const handleRouteEdit = async (row) => {
  const { code, data } = await meRoutesIdApi(row.id);
  if (code === 200) {
    backStrFn22(data, true);
    saveRouteBool.value = false;
    // airObjList1.value = data;
  }
};
const handleRouteDelete = async (row) => {
  const { code } = await deleteMeRoutesApi(row.id);
  if (code === 200) {
    findSaveRoute();
  }
};

const handleLineEdit = async (row) => {
  const { code, data } = await meAirlinesIdApi(row.id);
  if (code === 200) {
    backStrFn33(data, true);
    saveLineBool.value = false;
    // airObjList1.value = data;
  }
};
const handleLineDelete = async (row) => {
  const { code } = await deleteMeAirlinesApi(row.id);
  if (code === 200) {
    findLineRoute();
  }
};

const handleAreaEdit = async (row) => {
  const { code, data } = await meAirAreasIdApi(row.id);
  if (code === 200) {
    backStrFn44(data, true);
    saveAreaBool.value = false;
    // airObjList1.value = data;
  }
};
const handleAreaDelete = async (row) => {
  const { code } = await deleteMeAreasApi(row.id);
  if (code === 200) {
    findSaveArea();
  }
};

// 处理选中变化的函数
const handleAirChange = async (selectedCode) => {
  const selectedItem = airObjListObj1.value.find(
    (item) => item.id === selectedCode
  );
  if (selectedItem) {
    backStrFn11(selectedItem, false);
  } else {
    const { code: defaultCode, data: defaultData } = await selectionsGetApi(
      3,
      1
    );
    if (defaultCode !== 200 || !defaultData) return;
    backStrFn1(defaultData, false);
  }
};
// 处理选中变化的函数
const handleRouteChange = async (selectedCode) => {
  const selectedItem = routeObjListObj1.value.find(
    (item) => item.id === selectedCode
  );
  if (selectedItem) {
    backStrFn22(selectedItem, false);
  } else {
    const { code: defaultCode, data: defaultData } = await selectionsGetApi(
      3,
      6
    );
    if (defaultCode !== 200 || !defaultData) return;
    backStrFn2(defaultData, false);
  }
};
// 处理选中变化的函数
const handleLineChange = async (selectedCode) => {
  console.log(lineObjListObj1);
  const selectedItem = lineObjListObj1.value.find(
    (item) => item.name === selectedCode
  );
  if (selectedItem) {
    backStrFn33(selectedItem, false);
  } else {
    const { code: defaultCode, data: defaultData } = await selectionsGetApi(
      3,
      7
    );
    if (defaultCode !== 200 || !defaultData) return;
    backStrFn3(defaultData, false);
  }
};
// 处理选中变化的函数
const handleAreaChange = async (selectedCode) => {
  console.log(lineObjListObj1);
  const selectedItem = areaObjListObj1.value.find(
    (item) => item.name === selectedCode
  );
  if (selectedItem) {
    backStrFn44(selectedItem, false);
  } else {
    const { code: defaultCode, data: defaultData } = await selectionsGetApi(
      3,
      4
    );
    if (defaultCode !== 200 || !defaultData) return;
    backStrFn4(defaultData, false);
  }
};

// 查看已保存机场
const findSaveAir = async () => {
  const { code, data } = await meAirportsApi();
  if (code === 200) {
    currentPage1.value = 1;
    total1.value = data.length;
    saveAirBool.value = true;
    saveAirList.value = data;
    airObjListObj1.value = data;
    const routeData = data.map((outerItem) => ({
      code: outerItem.airportCode,
      name: outerItem.name,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "0000000000",
    });
    airObjList1.value = routeData;
  }
};
const findSaveAir1 = async () => {
  const { code, data } = await meAirportsApi();
  if (code === 200) {
    currentPage1.value = 1;
    total1.value = data.length;
    // saveAirBool.value = true;
    saveAirList.value = data;
    airObjListObj1.value = data;
    const routeData = data.map((outerItem) => ({
      code: outerItem.airportCode,
      name: outerItem.name,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "0000000000",
    });
    airObjList1.value = routeData;
  }
};
// 查看已保存航路
const findSaveRoute = async () => {
  const { code, data } = await meRoutesApi();
  if (code === 200) {
    currentPage2.value = 1;
    total2.value = data.length;
    saveRouteBool.value = true;
    saveRouteList.value = data;
    routeObjListObj1.value = data;
    const routeData = data.map((outerItem) => ({
      code: outerItem.code,
      name: outerItem.name,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "0000000000",
    });
    routeObjList1.value = routeData;
  }
};
const findSaveRoute1 = async () => {
  const { code, data } = await meRoutesApi();
  if (code === 200) {
    currentPage2.value = 1;
    total2.value = data.length;
    saveRouteList.value = data;
    routeObjListObj1.value = data;
    const routeData = data.map((outerItem) => ({
      code: outerItem.code,
      name: outerItem.name,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "0000000000",
    });
    routeObjList1.value = routeData;
  }
};
// 查看已保存航线
const findLineRoute = async () => {
  const { code, data } = await meAirlinesApi();
  if (code === 200) {
    currentPage3.value = 1;
    total3.value = data.length;
    saveLineBool.value = true;
    saveLineList.value = data;
    lineObjListObj1.value = data;
    const routeData = data.map((outerItem) => ({
      code: outerItem.code,
      name: outerItem.name,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "0000000000",
    });
    lineObjList1.value = routeData;
  }
};
const findLineRoute1 = async () => {
  const { code, data } = await meAirlinesApi();
  if (code === 200) {
    currentPage3.value = 1;
    total3.value = data.length;
    saveLineList.value = data;
    lineObjListObj1.value = data;
    const routeData = data.map((outerItem) => ({
      code: outerItem.code,
      name: outerItem.name,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "0000000000",
    });
    lineObjList1.value = routeData;
  }
};

// 查看已保存区域
const findSaveArea = async () => {
  const { code, data } = await meAreasApi();
  if (code === 200) {
    currentPage4.value = 1;
    total4.value = data.length;
    saveAreaBool.value = true;
    saveAreaList.value = data;
    areaObjListObj1.value = data;
    const routeData = data.map((outerItem) => ({
      code: outerItem.code,
      name: outerItem.name,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "0000000000",
    });
    areaObjList1.value = routeData;
  }
};
const findSaveArea1 = async () => {
  const { code, data } = await meAreasApi();
  if (code === 200) {
    currentPage4.value = 1;
    total4.value = data.length;
    saveAreaList.value = data;
    areaObjListObj1.value = data;
    const routeData = data.map((outerItem) => ({
      code: outerItem.code,
      name: outerItem.name,
      id: outerItem.id,
    }));
    routeData.unshift({
      id: "0000000000",
      name: "请选择",
      code: "0000000000",
    });
    areaObjList1.value = routeData;
  }
};

const total1 = ref(0);
const pageSize1 = ref(10);
const currentPage1 = ref(1);
const total2 = ref(0);
const pageSize2 = ref(10);
const currentPage2 = ref(1);
const total3 = ref(0);
const pageSize3 = ref(10);
const currentPage3 = ref(1);
const total4 = ref(0);
const pageSize4 = ref(10);
const currentPage4 = ref(1);

// 计算当前页数据
const currentLineListData = computed(() => {
  const start = (currentPage3.value - 1) * pageSize3.value;
  const end = start + pageSize3.value;
  return saveLineList.value.slice(start, end);
});
// 每页条数改变时的回调
const handleSizeChange3 = (val) => {
  pageSize3.value = val;
  currentPage3.value = 1;
};
// 当前页改变时的回调
const handleCurrentChange3 = (val) => {
  currentPage3.value = val;
};

// 计算当前页数据
const currentRouteListData = computed(() => {
  const start = (currentPage2.value - 1) * pageSize2.value;
  const end = start + pageSize2.value;
  return saveRouteList.value.slice(start, end);
});
// 每页条数改变时的回调
const handleSizeChange2 = (val) => {
  pageSize2.value = val;
  currentPage2.value = 1;
};
// 当前页改变时的回调
const handleCurrentChange2 = (val) => {
  currentPage2.value = val;
};
// 计算当前页数据
const currentAirListData = computed(() => {
  const start = (currentPage1.value - 1) * pageSize1.value;
  const end = start + pageSize1.value;
  return saveAirList.value.slice(start, end);
});
// 每页条数改变时的回调
const handleSizeChange1 = (val) => {
  pageSize1.value = val;
  currentPage1.value = 1;
};
// 当前页改变时的回调
const handleCurrentChange1 = (val) => {
  currentPage1.value = val;
};
// 计算当前页数据
const currentAreaListData = computed(() => {
  const start = (currentPage4.value - 1) * pageSize4.value;
  const end = start + pageSize4.value;
  return saveAreaList.value.slice(start, end);
});
// 每页条数改变时的回调
const handleSizeChange4 = (val) => {
  pageSize4.value = val;
  currentPage4.value = 1;
};
// 当前页改变时的回调
const handleCurrentChange4 = (val) => {
  currentPage4.value = val;
};

// 机场预测
const airportsResult1 = async () => {
  let paramsObj = {
    airportRequest: {
      airportCode: airportCode1.value,
      city: airportCity1.value,
      elevation: airportElevation1.value,
      latitude: airportLatitude1.value,
      longitude: airportLongitude1.value,
      name: airportName12.value,
    },
    params: {
      algorithmId: optionsListAlgorithmDefault1.value,
      angleId: optionsListAngleDefault1.value,
      satSysId: optionsListSatsysDefault1.value,
    },
    period: {
      endTime: dayjs(selectedTime12.value).format("YYYY/MM/DD HH:mm:ss"),
      startTime: dayjs(selectedTime11.value).format("YYYY/MM/DD HH:mm:ss"),
    },
  };
  const { code, data } = await postForecastAirportCustomApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }

    // leftInfoBox.value.sf = getDescById(
    //   optionsListAlgorithm.value,
    //   optionsListAlgorithmDefault4.value
    // );
    // leftInfoBox.value.angle = getDescById(
    //   optionsListAngle.value,
    //   optionsListAngleDefault4.value
    // );
    // leftInfoBox.value.star = getDescById(
    //   optionsListSatsys.value,
    //   optionsListSatsysDefault4.value
    // );
    // leftInfoBox.value.nanu = data.extra.nanuPrns;
    // leftInfoBox.value.go = "NUC5";
    // leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    // leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    // leftInfoBox.value.time = utcTime.value;

    // areaStatic1.value = data.areaStatisticsResults;
    // airTestsAreaObj.value = data.areaStatisticsResults;
    // airTestsFilterObj.value = [];
  }
};
// 航路预测
const airportsResult6 = async () => {
  let paramsObj = {
    params: {
      algorithmId: optionsListAlgorithmDefault2.value,
      angleId: optionsListAngleDefault2.value,
      satSysId: optionsListSatsysDefault2.value,
      stdId: stdId2.value,
    },
    period: {
      endTime: dayjs(selectedTime22.value).format("YYYY/MM/DD HH:mm:ss"),
      startTime: dayjs(selectedTime21.value).format("YYYY/MM/DD HH:mm:ss"),
    },
    routeCode: airportCode2.value,
    routeName: airportName22.value,
    waypoints: [
      {
        elevation: airportElevation21.value,
        latitude: airportLatitude221.value,
        longitude: airportLongitude211.value,
        name: startName.value,
      },
      {
        elevation: airportElevation22.value,
        latitude: airportLatitude222.value,
        longitude: airportLongitude212.value,
        name: endName.value,
      },
    ],
  };
  const { code, data } = await postForecastRouteCustomApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }

    // leftInfoBox.value.sf = getDescById(
    //   optionsListAlgorithm.value,
    //   optionsListAlgorithmDefault4.value
    // );
    // leftInfoBox.value.angle = getDescById(
    //   optionsListAngle.value,
    //   optionsListAngleDefault4.value
    // );
    // leftInfoBox.value.star = getDescById(
    //   optionsListSatsys.value,
    //   optionsListSatsysDefault4.value
    // );
    // leftInfoBox.value.nanu = data.extra.nanuPrns;
    // leftInfoBox.value.go = "NUC5";
    // leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    // leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    // leftInfoBox.value.time = utcTime.value;

    // areaStatic1.value = data.areaStatisticsResults;
    // airTestsAreaObj.value = data.areaStatisticsResults;
    // airTestsFilterObj.value = [];
  }
};
// 航线预测
const airportsResult7 = async () => {
  const waypoints7NewArr = waypoints7.value.map((item) => {
    return {
      elevation: item.elevation,
      latitude: item.latitude,
      longitude: item.longitude,
      name: item.name,
    };
  });
  let paramsObj = {
    airlineCode: airportCode3.value,
    airlineName: airportName32.value,
    airportAlgorithmId: optionsListAlgorithmDefault3.value,
    airportAngleId: optionsListAngleDefault33.value,
    algorithmId: optionsListAlgorithmDefault32.value,
    depAirport: {
      airportCode: airport31.value,
      elevation: airportElevation31.value,
      latitude: airportLatitude321.value,
      longitude: airportLongitude311.value,
    },
    depAngleId: optionsListAngleDefault31.value,
    destAirport: {
      airportCode: airport32.value,
      elevation: airportElevation32.value,
      latitude: airportLatitude322.value,
      longitude: airportLongitude312.value,
    },
    destAngleId: optionsListAngleDefault32.value,
    forecastMode: forecastMode.value,
    period: {
      endTime: dayjs(selectedTime32.value).format("YYYY/MM/DD HH:mm:ss"),
      startTime: dayjs(selectedTime31.value).format("YYYY/MM/DD HH:mm:ss"),
    },
    routeAlgorithmId: optionsListAlgorithmDefault31.value,
    routeAngleId: optionsListAngleDefault34.value,
    routeStdId: stdId31.value,
    satSysId: optionsListSatsysDefault3.value,
    stdId: stdId3.value,
    waypoints: waypoints7NewArr,
  };

  const { code, data } = await postForecastAirlineCustomApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    // leftInfoBox.value.sf = getDescById(
    //   optionsListAlgorithm.value,
    //   optionsListAlgorithmDefault5.value
    // );
    // leftInfoBox.value.angle = getDescById(
    //   optionsListAngle.value,
    //   optionsListAngleDefault5.value
    // );
    // leftInfoBox.value.star = getDescById(
    //   optionsListSatsys.value,
    //   optionsListSatsysDefault5.value
    // );
    // leftInfoBox.value.go = getDescById(optionsListStandard.value, stdId5.value);
    // leftInfoBox.value.nanu = data.extra.nanuPrns;
    // leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    // leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    // leftInfoBox.value.time = utcTime.value;

    // airTestsRouteObj.value = data;
    // if (data.empty) {
    //   routeWayPoints.value = [];
    // } else {
    //   routeWayPoints.value = data.route.wayPoints;
    // }
  }
};
// 区域预测
const airportsResult4 = async () => {
  let paramsObj = {
    city: areaCity.value,
    code: areaCode.value,
    elevation: areaElevation.value,
    forecastMode: forecastAreaMode.value,
    latitude: areaLatitude.value,
    longitude: areaLongitude.value,
    name: areaName1.value,
    params: {
      algorithmId: optionsListAlgorithmDefault4.value,
      angleId: optionsListAngleDefault4.value,
      satSysId: optionsListSatsysDefault4.value,
    },
    period: {
      endTime: dayjs(AreaEndTime.value).format("YYYY/MM/DD HH:mm:ss"),
      startTime: dayjs(AreaStartTime.value).format("YYYY/MM/DD HH:mm:ss"),
    },
  };

  const { code, data } = await postForecastAreaCustomApi(paramsObj);
  if (code === 200) {
    if (data.empty) {
      ElMessage.warning("预测结果为空");
    }
    // leftInfoBox.value.sf = getDescById(
    //   optionsListAlgorithm.value,
    //   optionsListAlgorithmDefault5.value
    // );
    // leftInfoBox.value.angle = getDescById(
    //   optionsListAngle.value,
    //   optionsListAngleDefault5.value
    // );
    // leftInfoBox.value.star = getDescById(
    //   optionsListSatsys.value,
    //   optionsListSatsysDefault5.value
    // );
    // leftInfoBox.value.go = getDescById(optionsListStandard.value, stdId5.value);
    // leftInfoBox.value.nanu = data.extra.nanuPrns;
    // leftInfoBox.value.almanacWeek = data.extra.almanacWeek;
    // leftInfoBox.value.secondsOfWeek = data.extra.secondsOfWeek;
    // leftInfoBox.value.time = utcTime.value;

    // airTestsRouteObj.value = data;
    // if (data.empty) {
    //   routeWayPoints.value = [];
    // } else {
    //   routeWayPoints.value = data.route.wayPoints;
    // }
  }
};

onMounted(() => {
  loadAllOptions(); // 整合所有异步加载逻辑
});
const handleCheckboxChange = (currentIndex) => {
  waypoints7.value.forEach((item, index) => {
    item.checked = index === currentIndex;
  });
};

const deleteItem = () => {
  const selectedIndex = waypoints7.value.findIndex((item) => item.checked);
  if (selectedIndex === -1) return;
  waypoints7.value.splice(selectedIndex, 1);
};
const addItem = () => {
  if (
    !lineInputlongitude.value ||
    !lineInputlatitude.value ||
    !lineInputelevation.value ||
    !lineInputName.value
  )
    return;
  const newItem = {
    elevation: lineInputelevation.value,
    latitude: lineInputlatitude.value,
    longitude: lineInputlongitude.value,
    name: lineInputName.value,
    checked: false,
  };
  waypoints7.value.push(newItem);
};
// const insertItem = () => {
//   const selectedIndex = routeSegments.value.findIndex((item) => item.checked);
//   if (
//     selectedIndex === -1 ||
//     !typesWaypoint71.value ||
//     !routeCode7.value ||
//     !typesWaypoint72.value
//   )
//     return;

//   const newItem = {
//     entryWaypointName: typesWaypoint71.value,
//     routeCode: routeCode7.value,
//     exitWaypointName: typesWaypoint72.value,
//     checked: false,
//   };
//   routeSegments.value.splice(selectedIndex, 0, newItem);
// };
</script>

<style scoped lang="scss">
.homeContainer {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 1280px;
  position: relative;
  box-sizing: border-box;
}
.findRouteBox {
  position: absolute;
  background-color: #06112a;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  box-sizing: border-box;
}
.centerBox {
  display: flex;
  gap: 10px;
  padding: 15px 15px 0;
  justify-content: space-between;
  box-sizing: border-box;
  flex: 1;
}
.centerLeft {
  flex: 1;
  min-width: 790px;
  position: relative;
  background-image: url("../../assets/images/raim/leftBox.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  margin: 0;
  .mapInfoBox {
    position: absolute;
    left: 42px;
    bottom: 70px;
    width: 342px;
    height: 140px;
    padding-top: 16px;
    background-image: url("../../assets/images/raim/leftBottom.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    span {
      color: #fff;
      font-size: 12px;
      float: left;
      padding: 0 10px;
      margin-right: 10px;
      margin-left: 20px;
      line-height: 22px;
    }
  }
}
.centerRight {
  width: 370px;
  height: calc(100vh - 120px);
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .rightTop {
    margin-top: 0;
    flex-wrap: wrap;
    .rightBtn {
      cursor: pointer;
      margin-right: 8px;
      margin-bottom: 8px;
      float: left;
      text-align: center;
      color: #c5d6e6;
      width: 130px;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      background: rgba(0, 175, 255, 0.1);
    }
    .rightBtnCur {
      color: #1fc6ff;
      border-bottom: 2px solid #1fc6ff;
      background: linear-gradient(
        0deg,
        rgba(31, 198, 255, 0.32) 0%,
        rgba(31, 198, 255, 0) 100%
      );
    }
  }
  .rightInfo {
    margin-top: 2px;
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 6px;
    background-image: url("../../assets/images/raim/rightInfoBox.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    box-sizing: border-box;
  }

  .rightBottom {
    margin-top: 8px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 44px;
    width: 100%;
    height: 44px;
    border: 1px solid #00afff;
    background: #022a55;
    box-sizing: border-box;
  }
}
.centerRight .rightBottom:active {
  background: #043e7c;
  border-color: #1fc6ff;
}
.footerTime {
  width: 100%;
  height: 28px;
  background-color: #050d24;
  box-sizing: border-box;
  p {
    color: #fff;
    text-align: right;
    font-size: 12px;
    line-height: 28px;
    padding-right: 16px;
  }
}
.airport-select-container {
  padding: 0 16px;
  height: auto;
  height: calc(100vh - 264px);
  overflow-y: auto;
  box-sizing: border-box;
}

.airport-select-container::-webkit-scrollbar {
  width: 4px;
}
.airport-select-container::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}

.airport-select-container::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}

.airport-select-container::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}

.airport-select-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
}
.select-item {
  margin-bottom: 8px;
}
.select-item7 {
  margin-bottom: 8px;
  width: 176px;
  float: left;
  margin-right: 12px;
}
.select-item7:nth-child(odd) {
  float: left;
  margin-right: 0px;
}

::v-deep .select-item7short .el-input {
  float: left;
  width: 56px;
  height: 28px;
}
::v-deep .select-item7short .boxspan {
  float: left;
  margin: 0 5px;
  font-size: 12px;
  color: #fff;
  line-height: 28px;
}
::v-deep .innerBox {
  overflow-y: auto;
  height: 96px;
  .white-text-checkbox {
    margin-bottom: 0;
    line-height: 32px;
    .el-checkbox__inner {
      // background-color: transparent;
    }
  }
}
::v-deep .routerName {
  border: 1px solid #003b7a;
  padding: 5px 12px;
  padding-top: 3px;

  .el-checkbox__label {
    vertical-align: text-top;
    color: #fff;
  }
  .innerBox::-webkit-scrollbar {
    width: 4px;
  }
  .innerBox::-webkit-scrollbar-track {
    background: rgba(6, 15, 37, 0.5);
    border-radius: 2px;
  }

  .innerBox::-webkit-scrollbar-thumb {
    background: rgba(0, 175, 255, 0.4);
    border-radius: 2px;
  }

  .innerBox::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 175, 255, 0.6);
  }

  .innerBox {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
  }
}
::v-deep .el-input__wrapper {
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  background-color: transparent;
  box-shadow: none;
  color: #fff;
  border: 1px solid #003b7a;
}

.kindBtnChanges {
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  .btnBox {
    margin-right: 12px;
    cursor: pointer;
    height: 32px;
    padding: 6px 9px;
    float: left;
    border-radius: 4px;
    border: 1px solid #003b7a;
    font-size: 14px;
    color: #fff;
    background: transparent;
  }
  .btnBoxCur {
    background: #00afff;
  }
}

.select-item label {
  text-align: left;
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  color: #fff !important;
}

.el-select {
  width: 100%;
  // border: 1px solid #003b7a;
}
::v-deep .custom-select-container .el-select__wrapper {
  background: transparent;
  box-shadow: none;
  height: 28px;
  min-height: 28px;
}
::v-deep .custom-select-container .el-select__selected-item {
  color: #fff !important;
}
::v-deep .custom-select-container .el-select__caret {
  color: #fff !important;
}
::v-deep .custom-select-container .el-scrollbar {
  background-color: #334155;
}
/* 下拉菜单容器样式 */
::v-deep .custom-select-container .el-select-dropdown {
  background-color: #1e293b;
  border: 1px solid #334155;
  box-shadow: none;
}

.el-select-dropdown__item {
  height: 28px !important;
  line-height: 28px !important;
  background-color: #060f25;
  color: #fff;
}

.el-select-dropdown__item:hover {
  background-color: #0c1e4b;
  color: #fff;
}

.el-select-dropdown__item.is-selected {
  background-color: #0c1e4b;
  color: #0083cf !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: #0c1e4b;
  color: #fff;
}

:deep(.el-date-editor.el-input) {
  width: 100%;
  height: 28px;
  font-size: 12px;
}
:deep(.el-date-editor.el-input .el-input__wrapper) {
  color: #fff;
  background: transparent;
  border: 1px solid #003b7a;
  box-shadow: none;
}
:deep(.el-date-editor.el-input .el-input__inner) {
  color: #fff;
}
:deep(.el-input__inner) {
  color: #fff;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
}

/* // table */
/* 样式保持不变 */
.detailWrapBoxCe {
  padding: 24px 24px 16px 24px;
  width: 100%;
  height: 100%;
  z-index: 1;
  .topBack {
    cursor: pointer;
    width: 100%;
    margin-left: 24px;
    height: 24px;
    margin-bottom: 16px;
    margin-top: 24px;
    i {
      float: left;
      width: 24px;
      height: 24px;
      background-image: url("../../assets/images/raim/back.png");
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    span {
      color: #fff;
      font-size: 20px;
      text-align: left;
      float: left;
      margin-left: 4px;
      line-height: 28px;
      font-weight: 700;
    }
  }
  .detailBody {
    width: 100%;
    padding: 0 30px;
    overflow: hidden;
  }
}
/* 自定义表格样式 */
::v-deep .custom-table .el-table__header {
  height: 40px;
  line-height: 40px;
  background: rgba(0, 175, 255, 0.2);
}
::v-deep .custom-table .el-table__header th {
  font-size: 12px;
  font-weight: 700;
  background: rgba(0, 175, 255, 0.2);
  color: #ffffff;
}
::v-deep .custom-table .el-table__row:nth-child(even) {
  background: rgba(0, 59, 122, 0.2) !important;
}
::v-deep .custom-table .el-table__row:nth-child(odd) {
  background-color: transparent;
}
::v-deep .custom-table .el-table__body td {
  color: #ffffff;
}
/* 自定义分页样式 */
.custom-pagination {
  /* float: right;
  margin-top: 20px; */
  position: absolute;
  right: 40px;
  bottom: 40px;
}
.custom-pagination .el-pagination__total {
  color: #ffffff;
}
.custom-pagination .el-pagination__sizes {
  color: #ffffff;
}
.custom-pagination .el-pagination__sizes .el-input__inner {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-pagination__sizes .el-input__inner:hover {
  border-color: #4aadf8;
}
.custom-pagination .el-pagination__btn {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-pagination__btn:hover {
  background-color: #4aadf8;
  border-color: #4aadf8;
}

.custom-pagination .el-pagination__active {
  background-color: #00a2ff;
  color: #ffffff;
  border: 1px solid #00a2ff;
}
.custom-pagination .el-pagination__jump {
  color: #ffffff;
}
.custom-pagination .el-input__inner {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid #3e465e;
}
.custom-pagination .el-input__inner:hover {
  border-color: #4aadf8;
}
::v-deep .tableScrollBox {
  height: 670px;
  overflow-y: auto;
}

::v-deep .tableScrollBox::-webkit-scrollbar {
  width: 2px;
}
::v-deep .tableScrollBox::-webkit-scrollbar-track {
  background: rgba(6, 15, 37, 0.5);
  border-radius: 2px;
}

::v-deep .tableScrollBox::-webkit-scrollbar-thumb {
  background: rgba(0, 175, 255, 0.4);
  border-radius: 2px;
}

::v-deep .tableScrollBox::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 175, 255, 0.6);
}

::v-deep .tableScrollBox {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 175, 255, 0.4) rgba(6, 15, 37, 0.5);
}
/* 表格容器背景透明 */
:deep(.el-table) {
  background-color: transparent !important;
  border: none;
}
:deep(.el-table__body tr) {
  background-color: transparent !important;
}

:deep(.el-table__header tr) {
  color: #c5d6e6;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  background-color: transparent !important;
}
/* 斑马线样式：偶数行 */
:deep(.table-row-even) {
  background-color: rgba(0, 59, 122, 0.2) !important;
}

/* 斑马线样式：奇数行 */
:deep(.table-row-odd) {
  background-color: transparent !important;
}

/* 表格行hover效果 */
:deep(.el-table__row:hover > td) {
  background-color: rgba(0, 59, 122, 0.2) !important;
}

/* 去掉表格默认边框线 */
:deep(.el-table__inner-wrapper::before) {
  background-color: transparent !important;
}
:deep(.el-table__cell) {
  border-bottom: none !important;
}
/* 关键：修改斑马线行的单元格背景色 */
:deep(
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell
  ) {
  padding: 0;
  background-color: rgba(0, 59, 122, 0.2) !important;
}
:deep(.el-table .cell) {
  padding-right: 0 !important;
}
:deep(.el-pagination__sizes) {
  color: #fff;
}
:deep(.el-pagination__total) {
  color: #fff;
}
:deep(.el-pagination__jump) {
  color: #fff;
}
:deep(.el-pager li) {
  background-color: transparent !important;
  color: #fff;
  border: 1px solid #3e465e;
}
:deep(.el-pager li:hover) {
  background-color: #4aadf8 !important;
  color: #fff;
  border: 1px solid #4aadf8;
}
:deep(.el-pager .is-active) {
  background-color: #4aadf8 !important;
  color: #fff;
  border: 1px solid #4aadf8;
}
:deep(.el-pagination button),
:deep(.el-select__wrapper),
:deep(.el-input__wrapper) {
  background-color: transparent !important;
  color: #fff !important;
  border: 1px solid #003b7a;
}
:deep(.el-pagination .el-input__inner),
:deep(.el-select__placeholder) {
  color: #fff;
}
:deep(.el-table .el-table__cell) {
  padding: 4px 0 3px 0;
  font-size: 12px;
}
:deep(.custom-tooltip) {
  background-color: #286bf4 !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
}
</style>
